<!-- 我的商品收藏 -->
<template>
  <s-layout
    title="切换账号"
    tabbar="/pages/index/cart"
    backgroundColor="#4E8EF7"
    navbar="normal"
    :showLeftButton="false"
    :bgStyle="{ color: '#fff' }"
  >
    <view class="user-box">
      <view class="user-list-box">
        <view class="userList">
          <view class="user-item">
            <view class="avart">
              <image class="avart-img" src="/static/images/avart.png"></image>
            </view>
            <view class="user-text">
              <view>
                <view class="zhanghao">
                  <view>张三</view>
                  <view class="zhanghao-text">主账号</view>
                </view>
                <view>ID：111111111111</view>
              </view>
              <view class="switch-btn">
                <view>当前账号</view>
              </view>
            </view>
          </view>
        </view>

        <!-- 子账号 -->
        <view class="userList" v-for="item in 1" :key="item">
          <view class="user-item">
            <view class="avart">
              <image class="avart-img" src="/static/images/avart.png"></image>
            </view>
            <view class="user-text">
              <view>
                <view class="zhanghao">
                  <view>张三</view>
                  <view class="zhanghao-text2">子账号</view>
                </view>
                <view>ID：111111111111</view>
              </view>
              <view class="switch-btn2">
                <view>切换账号</view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="add-zh">
        <view class="add-btn" @click="openCustomDialog"> 添加账号 </view>
      </view>
    </view>
  </s-layout>
  <view>
    <!-- <uni-popup ref="dialogPopup" type="dialog">
      <uni-popup-dialog
        mode="input"
        type="info"
        title="添加子账号"
        placeholder="请输入账号名称"
        :before-close="true"
        @confirm="dialogConfirm"
        @close="dialogClose"
      ></uni-popup-dialog>
    </uni-popup> -->
    <uni-popup ref="customDialog" type="dialog">
      <view class="custom-dialog">
        <view class="dialog-title">添加子账号</view>
        <view class="dialog-content">
          <!-- <uni-search-bar
            v-model="searchValue"
            class="uni-mt-10"
            radius="5"
            placeholder="请输入账号名称"
            cancelButton="none"
          /> -->
          <input class="uni-input" v-model="inputValue" placeholder="请输入账号名称" />
          <!-- <uni-icons v-if="inputValue" type="clear" size="20" @click="clearInput"></uni-icons> -->
        </view>
        <view class="dialog-buttons">
          <button class="btn-cancel" @click="handleCancel">取消</button>
          <button class="btn-confirm" @click="handleConfirm">确定</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>
  
<script setup>
import { ref, onMounted } from 'vue';
import UserApi from '../../sheep/api/member/user';

onMounted(() => {
  // console.log('data', data);
  UserApi.getUserInfo(data.id)
    .then((res) => {
      console.log('res', res);
      userName.value = res.data.username;
      // console.log('userName.value', userName.value);
    })
    .catch((err) => {
      console.log(err);
    });

  UserApi.switchAccounts(userName)
    .then((res) => {
      console.log('子账号列表', res);
    })
    .catch((err) => {
      console.log(err);
    });
});

const data = uni.getStorageSync('userInfo');
const userName = ref();
const id = uni.getStorageSync('userId');

const inputValue = ref('');

const customDialog = ref(null);

const clearInput = () => {
  inputValue.value = '';
};

const openCustomDialog = () => {
  inputValue.value = '';
  customDialog.value.open();
};

// 取消按钮回调
const handleCancel = () => {
  customDialog.value.close();
};
// 确定按钮回调
const handleConfirm = () => {
  console.log(inputValue.value);
  customDialog.value.close();
};
</script>
  
  <style lang="scss" scoped>
.user-box {
  position: relative;
  .user-list-box {
    padding-bottom: 130rpx;
    .userList {
      padding: 0 30rpx;
      .user-item {
        display: flex;
        align-items: center;
        background-color: #fff;
        border-radius: 10rpx;
        padding: 20rpx;
        margin: 30rpx 0;
        box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
        .avart {
          .avart-img {
            width: 100rpx;
            height: 100rpx;
          }
        }
      }
      .user-text {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 0 20rpx;
        .zhanghao {
          display: flex;
          align-items: center;
          .zhanghao-text {
            color: #5562f4;
            margin-left: 26rpx;
            padding: 4rpx 8rpx;
            text-align: center;
            background-color: #eff2f9;
            border-radius: 10rpx;
          }
          .zhanghao-text2 {
            color: #ed9353;
            margin-left: 26rpx;
            padding: 4rpx 8rpx;
            text-align: center;
            background-color: #f8f7f0;
            border-radius: 10rpx;
          }
        }
        .switch-btn {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 150rpx;
          height: 60rpx;
          background-color: #e1e9fe;
          border-radius: 30rpx;
          color: #1123e6;
          font-size: 24rpx;
        }
        .switch-btn2 {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 150rpx;
          height: 60rpx;
          background: linear-gradient(to left, #46e3fc, #487dfd);
          border-radius: 30rpx;
          color: #e8e8ee;
          font-size: 24rpx;
        }
        .switch-btn3 {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 150rpx;
          height: 60rpx;
          background-color: #0949ed;
          border-radius: 30rpx;
          color: #eeeff4;
          font-size: 24rpx;
        }
      }
    }
  }

  .add-zh {
    // position: absolute;
    position: fixed;
    top: 1500rpx;
    left: 150rpx;
    .add-btn {
      font-size: 40rpx;
      padding: 10rpx 30rpx;
      width: 400rpx;
      text-align: center;
      background: linear-gradient(to left, #46e3fc, #487dfd);
      border-radius: 100rpx;
    }
  }
}

.custom-dialog {
  background-color: #fff;
  width: 600rpx;
  border-radius: 15rpx;
  padding: 30rpx;

  .uni-input {
    height: 70rpx;
    background-color: #f8f8f8;
  }

  .dialog-title {
    font-size: 32rpx;
    font-weight: bold;
    text-align: center;
    margin-bottom: 30rpx;
  }

  .dialog-content {
    padding: 20rpx 0;
    min-height: 80rpx;
    font-size: 28rpx;
    color: #666;
    text-align: center;
  }

  .dialog-buttons {
    display: flex;
    justify-content: space-around;
    margin-top: 30rpx;

    button {
      width: 200rpx;
      height: 70rpx;
      line-height: 70rpx;
      text-align: center;
      border-radius: 35rpx;
      font-size: 28rpx;
    }

    .btn-cancel {
      background-color: #f5f5f5;
      color: #666;
    }

    .btn-confirm {
      background: linear-gradient(to left, #46e3fc, #487dfd);
      color: #fff;
    }
  }
}
</style>
  